<template>
  <div class="">
    <div class="ls-card m-t-16 p-20">
      <el-form :rules="rules" ref="form" :model="form" label-width="120px" size="small">
        <!-- 客服名称 -->
        <el-form-item label="客服名称" prop="service_name">
          <el-input class="ls-input" v-model="form.service_name" placeholder="请输入客服名称">
          </el-input>
        </el-form-item>
        <el-form-item label="客服电话" prop="service_mobile">
          <el-input class="ls-input" v-model="form.service_mobile" placeholder="请输入客服电话">
          </el-input>
        </el-form-item>
        <el-form-item label="二维码" prop="service_qrcode">
          <material-select v-model="form.service_qrcode" limit="1"></material-select>
        </el-form-item>
      </el-form>
    </div>

    <!-- 底部保存或取消 -->
    <div class="bg-white ls-fixed-footer">
      <div class="row-center flex" style="height: 100%;">
        <el-button size="small" @click="$router.go(-1)">取消</el-button>
        <el-button size="small" type="primary" @click="onSubmit('form')">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import { apiServiceGet, apiServiceSet } from '@/api/setting'
import materialSelect from '@/components/material-select/index.vue'

@Component({
  components: {
    materialSelect
  }
})
export default class ListsDetail extends Vue {
  /** S Data **/

  // 添加商城表单数据
  form: any = {
    service_name: '', // 客服名称
    service_mobile: '', // 客服电话
    service_qrcode: '' // 二维码
  };

  // 表单校验
  rules = {
    service_name: [{ required: true, message: '请输入客服名称', trigger: 'blur' }],
    service_mobile: [{ required: true, message: '请输入客服电话', trigger: 'blur' }],
    service_qrcode: [
      { required: true, message: '请选择客服二维码', trigger: 'blur' }
    ]
  };

  /** E Data **/

  /** S Methods **/
  // 点击表单提交
  onSubmit (formName: string) {
    // 验证表单格式是否正确
    const refs = this.$refs[formName] as HTMLFormElement
    refs.validate((valid: boolean): any => {
      if (!valid) return
      this.handleEdit()
    })
  }

  async handleEdit () {
    await apiServiceSet({ ...this.form })
    this.getShopDetailFunc()
  }

  // 获取详情
  async getShopDetailFunc (): Promise<void> {
    const res: any = await apiServiceGet()
    Object.keys(res).map((key) => {
      this.$set(this.form, key, res[key])
    })
  }
  /** E Methods **/

  /** S Life Cycle **/
  created () {
    this.getShopDetailFunc()
  }
  /** E Life Cycle **/
}
</script>

<style lang="scss" scoped>
  .ls-input {
    width: 380px;
  }
</style>
